<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="query" class="query-form" size="small">
        <el-form-item class="query-form-item">
          <el-select
            v-model="query.status"
            placeholder="请选择状态"
            @change="onSubmit"
            clearable
          >
            <el-option label="全部" value></el-option>
            <el-option label="禁用" value="0"></el-option>
            <el-option label="正常" value="1"></el-option>
            <el-option label="未验证" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-select
            v-model="query.roleId"
            placeholder="请选择角色"
            @change="onSubmit"
            clearable
          >
            <el-option label="全部角色" value></el-option>
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-input
            v-model="query.username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-search"
            @keyup.enter.native="onSubmit"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onRest"
          ></el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click.native="handleForm(null, null)"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="list"
        :header-cell-style="{ background: '#F4F4F5', color: '#606266' }"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="50" fixed />
        <el-table-column label="用户 ID" prop="id" width="80" align="center" />
        <el-table-column label="用户名" prop="username" align="center" />
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilterType">{{
              scope.row.status | statusFilterName
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="登录时间"
          with="300"
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" v-if="scope.row.lastLoginTime != null"></i>
            <span v-if="scope.row.lastLoginTime != null">{{
              scope.row.lastLoginTime | formatDateStr("yyyy-MM-dd hh:mm:ss")
            }}</span>
            <span v-else>暂未登录</span>
          </template>
        </el-table-column>
        <el-table-column label="登录IP" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.lastLoginTime != null">{{
              scope.row.lastLoginIp
            }}</span>
            <span v-else>暂未登录</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click.native="handleForm(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              :disabled="scope.row.id != 1 ? false : true"
              @click.native="handleDel(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="left-container">
        <el-button type="danger" size="small" @click="delGroup()"
          >删除已选</el-button
        >
        <transition name="el-fade-in-linear">
          <el-button
            size="small"
            @click="toggleSelection()"
            v-show="cancelToggle"
            >取消选择</el-button
          >
        </transition>
      </div>
      <el-pagination
        class="pagination-container"
        background
        :page-size="query.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :current-page="this.query.currentPage"
        :page-sizes="[5, 10, 20, 30, 50]"
        :total="totalNumber"
      ></el-pagination>
      <!--表单-->
      <el-dialog
        :title="formMap[formName]"
        :visible.sync="formVisible"
        :before-close="hideForm"
        width="50%"
        top="5vh"
        v-dialogDrag
        :close-on-click-modal="false"
      >
        <template slot="title">
          <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
              <span
                style="
                  display: inline-block;
                  background-color: #3478f5;
                  width: 3px;
                  height: 20px;
                  margin-right: 5px;
                  float: left;
                  margin-top: 2px;
                "
              ></span>
              {{ formMap[formName] }}
            </span>
          </div>
        </template>
        <el-card>
          <el-form
            :model="formData"
            :rules="formRules"
            ref="dataForm"
            label-width="140px"
          >
            <el-form-item label="用户名：" prop="username">
              <el-input
                v-model="formData.username"
                placeholder="请输入用户名"
                clearable
                auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="登录密码：" prop="password">
              <el-input
                type="password"
                v-model="formData.password"
                placeholder="请输入登录密码"
                auto-complete="off"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" prop="checkPassword">
              <el-input
                type="password"
                v-model="formData.checkPassword"
                placeholder="请再次输入密码"
                auto-complete="off"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="角色：" v-if="formData.id != 1">
              <el-checkbox-group v-model="formData.roles">
                <el-checkbox
                  v-for="item in roles"
                  :key="item.id"
                  :label="item.id"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="hideForm">取消</el-button>
          <el-button
            type="primary"
            @click.native="formSubmit()"
            :loading="formLoading"
            >提交</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  authAdminList,
  authAdminRoleList,
  authAdminSave,
  authAdminDelete,
} from "../../../api/auth/authAdmin";

export default {
  data() {
    return {
      roles: [],
      query: {
        username: "",
        status: "",
        currentPage: 1,
        pageSize: 5,
        roleId: "",
      },
      list: [],
      totalNumber: 0,
      loading: true,
      index: null,
      formName: null,
      formMap: {
        add: "添加",
        edit: "编辑",
      },
      cancelToggle: false,
      formLoading: false,
      formVisible: false,
      formData: {},

      formRules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 5,
            max: 20,
            message: "账号最少字符5，最大20",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        checkPassword: [
          {
            required: true,
            message: "请再次输入密码",
            trigger: "blur",
          },
          { validator: this.changevalidate, trigger: "blur" },
        ],
      },

      multipleSelection: [], //多选集合
    };
  },
  methods: {
    changevalidate(rule, value, callback) {
      if (this.formData.checkPassword !== this.formData.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val == "") {
        this.cancelToggle = false;
        return;
      }
      this.cancelToggle = true;
    },
    delGroup() {
      var ids = this.multipleSelection.map((item) => item.id).join(); //获取所有选中行的id组成的字符串，以逗号分隔
      var idss = ids.split(",");
      for (var i = 0; i < idss.length; i++) {
        if ("1" === idss[i]) {
          this.$message({
            message: "不能删除管理员",
            type: "warning",
          });
          return;
        }
      }
      if (ids == "") {
        this.$message({
          message: "请先选择",
          type: "warning",
        });
        return;
      }
      this.handleDel(ids);
    },
    onRest() {
      this.query = {
        username: "",
        status: "",
        currentPage: 1,
        pageSize: 5,
        roleId: "",
      };
      this.getList();
    },
    onSubmit() {
      this.query.currentPage = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getList();
    },
    getList() {
      this.loading = true;
      authAdminList(this.query)
        .then((response) => {
          if (response.code) {
            this.$message.error(response.message);
          }
          this.list = response.data.list || [];
          this.totalNumber = response.data.totalNumber || 0;
          setTimeout(() => {
            this.loading = false;
          }, 0.3 * 1000);
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.totalNumber = 0;
          this.roles = [];
        });
    },
    getRoleList() {
      authAdminRoleList(this.query)
        .then((response) => {
          if (response.code) {
            this.$message.error(response.message);
            return false;
          }
          this.roles = response.data.list || [];
        })
        .catch(() => {});
    },
    // 隐藏表单
    hideForm() {
      // 更改值
      this.formVisible = !this.formVisible;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        this.$refs["dataForm"].clearValidate();
      });
    },
    // 显示表单
    handleForm(index, row) {
      if (row) {
        this.formData = Object.assign({}, row);
        this.formData.checkPassword = this.formData.password;
        this.formName = "edit";
      } else {
        this.formData = {
          id: "",
          password: "",
          username: "",
          checkPassword: "",
          status: 1,
          roles: [],
        };
        this.formName = "add";
      }
      this.formVisible = true;
    },
    formSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.formLoading = true;
          let data = Object.assign({}, this.formData);
          authAdminSave(data, this.formName).then((response) => {
            this.formLoading = false;
            if (response.code) {
              this.$message.error(response.message);
              return false;
            }
            this.$message.success("操作成功");
            // 刷新表单
            this.$refs["dataForm"].resetFields();
            this.formVisible = false;
            this.getList();
          });
        }
      });
    },
    // 删除
    handleDel(ids) {
      if (ids) {
        this.$confirm("确认要删除吗?", "提示", {
          type: "warning",
        })
          .then(() => {
            this.loading = true;
            let para = { ids: ids };
            authAdminDelete(para)
              .then((response) => {
                this.loading = false;
                if (response.code) {
                  this.$message.error(response.message);
                  return false;
                }
                this.$message.success("删除成功");
                //返回第一页
                this.query.currentPage = 1;
                // 刷新数据
                this.getList();
              })
              .catch(() => {
                this.loading = false;
              });
          })
          .catch(() => {});
      }
    },
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        0: "gray",
        1: "success",
        2: "danger",
      };
      return statusMap[status];
    },
    statusFilterName(status) {
      const statusMap = {
        0: "禁用",
        1: "正常",
        2: "未验证",
      };
      return statusMap[status];
    },
  },
  mounted() {},
  created() {
    // 将参数拷贝进查询对象
    let query = this.$route.query;
    this.query = Object.assign(this.query, query);
    this.query.pageSize = parseInt(this.query.pageSize);
    // 加载表格数据
    this.getList();
    // 加载角色列表
    this.getRoleList();
  },
  // watch:{

  //     'formData.checkPassword':{
  //         handler(newVal,oldVal){
  //             this.formData.checkPassword =newVal
  //             console.log(this.formData.checkPassword)
  //             console.log(oldVal)
  //         },
  //         deep: true ,//开启深度监听
  //         immediate: true
  //     }
  // }
};
</script>

<style type="text/css" scoped>
body {
  margin: 0;
}
.el-checkbox {
  width: 120px !important;
  margin-left: 0 !important ;
}
</style>
